<template>
  <div class="app-container">
    <div class="cjdxq">
      <div class="steps">
        <el-steps :active="data.status" align-center>
          <el-step title="平台结算审核" :description="data.createTime"></el-step>
          <el-step title="经纪人申请提现" :description="data.applicationTime"></el-step>
          <el-step title="平台完成付款" :description="data.confirmTime"></el-step>
        </el-steps>
      </div>
      <div class="hetong">合同信息</div>
      <div class="detail">
        <div class="item">合同编号：{{data.contractCode}}</div>
        <div class="item">成交经纪人：{{data.dealAgent}}</div>
        <div class="item">承租人：{{data.tenantry}}</div>
        <div class="item">月租金：{{data.monthlyRent}}￥</div>
        <div class="item">返佣比例：{{data.rebate}}</div>
        <div class="item">返佣金额：{{data.rebateAmount}}</div>
      </div>
      <div class="fangyuan">成交房源：{{data.houses}}</div>
      <div class="jiesuanxinxi">
        <div class="item">结算编号：{{data.settlementCode}}</div>
        <div style="color:red" class="item">状态：{{setStatus}}</div>
        <div class="item">返佣经纪人层级：{{data.grade}}</div>
        <div class="item">返佣经纪人：{{data.agentName}}</div>
        <div class="item">返佣占比：{{data.mix}}</div>
        <div class="item">结算金额：{{data.settlementMoney}}¥</div>
      </div>
      <div class="imgs" v-if="data.status==3">
        <div class="title">备注：{{data.remark}}</div>
        <div class="img" v-if="data.images !== ''">
          <img v-for="(item , i) in data.images.split(',')" :src="item">
        </div>
      </div>
      <div class="buttons">
        <el-button @click="close">返回</el-button>
        <el-button v-if="data.status==2" type="primary" @click="dialogVisiblejj = true">确认已打款</el-button>
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisiblejj"
      width="30%"
      :before-close="handleClose">
      <div>
        <el-form ref="formjj" :model="formjj" label-width="80px">
          <el-form-item label="备注" prop='remark' :rules="{required: true, message: '请输入备注', trigger: 'blur' }">
            <el-input type="textarea" rows="6" v-model="formjj.remark"></el-input>
          </el-form-item>
          <el-form-item label="上传打款凭证" prop="image">
            <el-upload
              list-type="picture-card"
              :limit="1"
              :file-list="fileList"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :action="uploadImgUrl"
              name="file"
              :headers="headers"
              :show-file-list="true"
              :on-success="quillImgSuccess"
              :on-error="uploadError"
              :before-upload="quillImgBefore"
              accept='.jpg,.jpeg,.png,.gif'
              >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblejj = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('formjj')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { listSettlement, getSettlement, delSettlement, addSettlement, updateSettlement, exportSettlement } from "@/api/settlement/settlement";

  export default {
    name: "settlementDetail",
    data() {
      return {
        data:{},
        id:0,
        dialogVisiblejj: false,
        formjj:{
          remark:'',
          image:''
        },
        fileList:[],
        dialogImageUrl: '',
        dialogVisible: false,
        uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
        headers: {
          Authorization: 'Bearer ' + getToken()
        }
      }
    },
    created(){
      this.getData(this.$route.query.id)
    },
    computed:{
      setStatus(){
        if(this.data.status==1){
          return '待支出'
        }
        if(this.data.status==2){
          return '提现申请中'
        }
        if(this.data.status==3){
          return '已完成'
        }
      }
    },
    methods:{
      getData(id){
      this.id = id;
        getSettlement(id).then(response => {
          this.data = response.data;
        });
      },
      submitForm(formName) {
        var form={}
        var img=[]
        if(this.fileList.length){
          this.fileList.forEach(item=>{
            img.push(item.url)
          })
        }
        form.images=img.join(",")
        form.id=this.id
        form.status=3
        form.remark=this.formjj.remark

        this.$refs[formName].validate((valid) => {
          if (valid) {
             updateSettlement(form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.dialogVisiblejj = false;
                this.close();
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      // 图片上传前
      quillImgBefore(file) {
        let fileType = file.type;
        if(fileType === 'image/jpeg' || fileType === 'image/png'){
          return true;
        }else {
          this.$message.error('请插入图片类型文件(jpg/jpeg/png)');
          return false;
        }
      },

      quillImgSuccess(res, file) {
        // res为图片服务器返回的数据
        // 如果上传成功
        if (res.code == 200) {
          var list=[...this.fileList]
          list.push({name:res.fileName,url:res.url})
          console.log(list)
          this.fileList=list
        } else {
          this.$message.error("图片上传失败");
        }
      },
      // 图片上传失败
      uploadError() {
        // loading动画消失
        this.$message.error("图片上传失败");
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
        var list=[...this.fileList]
        var index=0
        for(var i in list){

          if(list[i].url===file.url){
            index=i
          }
        }
        list.splice(index*1,1)
        this.fileList=list
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      /** 关闭按钮 */
      close() {
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push({ path: "/settlement/settlement", query: { t: Date.now()}})
      }
    }
  }
</script>

<style scoped>
.cjdxq .hetong{
  margin-top: 50px;
}
.cjdxq .detail{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* border-bottom:1px solid #333; */
}
.cjdxq .detail .item{
  width: 30%;
  line-height: 50px;
}
.cjdxq .fangyuan{
  line-height: 50px;
  border-bottom:1px solid #333;
}
.cjdxq .price{
  /* margin-top: 100px; */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* border-bottom:1px solid #333; */
}
.cjdxq .price .item{
  width: 30%;
  line-height: 50px;
}
.cjdxq .jiesuanxinxi{
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* border-bottom:1px solid #333; */
}
.cjdxq .jiesuanxinxi .item{
  width: 30%;
  line-height: 50px;
}
.cjdxq .imgs{
  margin-top: 50px;
}
.cjdxq .imgs .img{
  margin-top: 10px;
}
.cjdxq .imgs img{
  width: 400px;
  height: 200px;
}
.cjdxq .buttons{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
